<template>
<div>
   <div id="main" style="height: 600px; width: 600px"></div>
  <svg>
        <linearGradient id="textGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="20%" stop-color="#ffffff"></stop>
            <stop offset="100%" stop-color="#0082ff"></stop>
        </linearGradient>
</svg>
</div>


  
</template>

<script>
export default {
  data() {
    return {
      //路由切换动画样式
      transitionName: "slide-left",
      //路由记录
      pathList: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var chartDom = document.getElementById("main");
      var myChart = this.$echarts.init(chartDom, 'dark', { renderer: 'svg' });
      var option;

      var img =
        "";

      var trafficWay = [
        {
          name: "火车",
          value: 20,
        },
        {
          name: "飞机",
          value: 10,
        },
        {
          name: "客车",
          value: 30,
        },
        {
          name: "轮渡",
          value: 40,
        },
      ];

      var data = [];
      var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return (
                      "交通方式：" +
                      params.name +
                      "\n" +
                      "\n" +
                      "占百分比：" +
                      percent +
                      "%"
                    );
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 30,
                length2: 100,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: data,
        },
      ];
      option = {
        backgroundColor: "#0A2E5D",
        color: color,
        title: {
          text: '{textcolor|交通方式}',
           top: "48%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            rich: {
              textcolor: {
                color: 'url(#textGradient)',
                fontSize:24
              },
            },
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          // x: 'left',
          data: ["火车", "飞机", "客车", "轮渡"],
          right: 340,
          bottom: 150,
          align: "right",
          textStyle: {
            color: "#fff",
          },
          itemGap: 20,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style>
.el-table {
  background-color: transparent;
}

.el-table tr {
  background-color: transparent;
}

.el-table thead {
  color: lightblue;
  background-color: transparent;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  background-color: transparent;
}

.el-table__body-wrapper::-webkit-scrollbar {
  width: 0;
}

.el-table--border th.el-table__cell.gutter:last-of-type {
  background-color: transparent;
}

.el-table .red_class {
  color: red;
  background-color: yellow;
}

.el-table .yellow_class {
  color: yellow;
  background-color: green;
}

.el-table .blue_class {
  color: blue;
  background-color: white;
}
</style>